import React, { useState } from 'react';
import { Text, View, Image,TouchableWithoutFeedback} from 'react-native';
import { scaleSizeH, scaleSizeW, setSpText, } from '../../util/ScreenUtil.js'
import ReactBotton from "../Widget/ReactBotton"
import StarItem  from '../Widget/starItem'
import Icon from "../../assets/fonts/iconfont.js";
import {url} from '../../util'
export default function HotmovieItem(props) {
    const SELECTED = "#fdad2b"
    const NO_SELECTED = "#e4e4e4"
    let { children, BoxStyle ,data} = props
    if (!data.number) {
        data.number=0 
    }
    let textStr=""
    let posterurl=url+data.poster[0]
    let actor=""
    let actorAry=data.actor
        actorAry.forEach((item,index)=>{
            actorAry[index]= item.split(" ")[0]
            if (index==(actorAry.length-1)) {
                actor+=actorAry[index]
            }else{
                actor+=actorAry[index]+"/"
            }
        })
    BoxStyle = {
        width:scaleSizeW(750),
        height:scaleSizeH(298),
        borderBottomWidth:1,
        borderBottomColor:"#eee",
        ...BoxStyle
    }
    let prplenumber=""
   let HotBotton={width:scaleSizeW(124),height:scaleSizeH(60),borderWidth: 1, borderColor: "#ed7682",backgroundColor:"#fff"}
   let HotText={fontSize:setSpText(28),color:"#ed7682"}
   let filmsBotton={width:scaleSizeW(124),height:scaleSizeH(60),borderWidth: 1, borderColor: "#ffad2e",backgroundColor:"#fff"}
   let filmsText={fontSize:setSpText(28),color:"#ffad2e"} 
    function isHOT(status) {
        if (status==0) {
            return <View style={{width:scaleSizeW(164),flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
            <StarItem number={data.score}></StarItem>
            <Text style={{ fontSize: setSpText(20), color: "#828282" }}>{data.score}</Text>
            </View>
        }
    }
    function getnumber(number) {
        if (number>10000) {
            prplenumber=(number/10000).toFixed(2)+"万人"
        }else{
            prplenumber=data.number+"人"
        }
    }
    function isHotData(status) {
        if (status==0) {
            getnumber(data.number)
            return <View style={{marginTop: scaleSizeH(69),alignItems:"center",width:scaleSizeW(144)}}>
            <Text style={{fontSize:setSpText(20),marginBottom:scaleSizeH(20)}}>{prplenumber}看过</Text>
            <ReactBotton
            buttonStyle={HotBotton}
            buttonText={HotText}
            >购票</ReactBotton>
            </View>
 
        }else{
            getnumber(data.number)
            return  <View style={{marginTop: scaleSizeH(69),alignItems:"center",width:scaleSizeW(144)}}>
            <Text style={{fontSize:setSpText(20),marginBottom:scaleSizeH(20)}}>{prplenumber}想看</Text>
            <ReactBotton
            buttonStyle={filmsBotton}
            buttonText={filmsText}
            >购票</ReactBotton>
            </View>
        }
    }
    function handleformovie() {
        props.navigation.navigate("Moviedetails",{id:data._id})
        
    }
    return (
        <TouchableWithoutFeedback onPress={handleformovie}>
        <View style={BoxStyle}>
            <View style={{flexDirection:"row",height:scaleSizeH(237),width:scaleSizeW(690),justifyContent:"space-between",marginLeft:scaleSizeW(32),}}>
                <Image
                source={{uri:posterurl}}
                style={{width:scaleSizeW(169),height:scaleSizeH(235),marginTop: scaleSizeH(30)}}
                />
                <View style={{width:scaleSizeW(320),marginTop: scaleSizeH(30),flexWrap:"nowrap"}}>
                    <Text style={{fontSize:setSpText(34),fontWeight:"bold"}}>{data.cname}</Text>
                    {isHOT(data.status)}
                    <Text style={{fontSize:setSpText(24),color:"#909090"}}>导演：{data.director}</Text>
                    <Text style={{fontSize:setSpText(24),color:"#909090"}}>演员：{actor}</Text>
                </View>
                {isHotData(data.status)}
            </View>
        </View>
        </TouchableWithoutFeedback>
    );
}